import React, { useCallback, useMemo, useState, createContext, useEffect, useLayoutEffect } from 'react'




const App = () => {
  const [title,setTitle] = useState('我是标题')
  const [count,setCount] = useState(0)
  
  // useEffect(() => {
  //   // 等待DOM更新完成之后 浏览器渲染完成之后执行
  //   if(title === 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa') {
  //     setTitle( '默认标题' )
  //   }
  // },[title])

  useLayoutEffect(() => {
    // 等待DOM更新完成之后 浏览器渲染之前 执行
    if(title === 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa') {
      setTitle( '默认标题' )
    }
  },[title])


  return (

      <div>
        <h2>{title}</h2>
        <input type="text" value={title} onChange={e=>setTitle(e.target.value)}/>
        <button onClick={() => setTitle('aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa')}>修改标题</button>

        <hr />

      </div>

  )




}

export default App

